<template>
    <div >
        <a-row>
            <a-col :span="6" v-for="goods in footList">
                <a-card hoverable style="width: 240px;height: 400px">

                    <img
                            @click="toDetail(goods.goodsId)"
                            slot="cover"
                            alt="example"
                            style="height: 240px"
                            :src="goods.picture"/>
                    <div style="height: 90px">
                        {{goods.title&&goods.title.length>60?goods.title.substring(0,60):goods.title}}
                    </div>
                    <div style="color: #E01222">
                        ￥
                        <span style="font-size: 24px">
                                {{goods.price}}
                            </span>
                    </div>
                </a-card>
            </a-col>


        </a-row>
    </div>
</template>

<script>
    import footApi from "../../../api/user/footApi";

    export default {
        name: "FootIndex",
        data() {
            return {
                footList: []
            }
        },
        created() {
            this.fetchFootList()
        },
        methods: {
            fetchFootList() {
                footApi.userFootGoods().then(resp => {
                    if (resp.data.flag) {
                        this.footList = resp.data.data
                    }
                })
            },
            toDetail(goodsId) {
                goodsId = goodsId + ''
                let uri = `/goodDetail?goodsInfo=${encodeURI(JSON.stringify({id: goodsId}))}`
                this.$router.push(encodeURI(uri))

            }
        }
    }
</script>

<style scoped>

</style>